<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/4-1'}">打卡管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/4-1'}">打卡列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="22" :offset="1" class="column">
        <div>
          微信号
          <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch"></el-autocomplete>
        </div>
        <div>
          手机号
          <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch2"></el-autocomplete>
        </div>
        <div>
          打卡时间
          <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期" @change="datetime"
                          value-format="timestamp"  format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </div>
        <div>
          <el-button type="success" @click="handleSearch">搜索</el-button>
          <el-button type="info" @click="handlereset">重置</el-button>
        </div>
      </el-col>
      <el-col :span="22" :offset="1" style="margin-top: 20px">
        <el-table stripe border style="margin-top: 20px" :data="tableData" >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="wechatNumber" label="微信号"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="name" label="宝宝昵称"></el-table-column>
          <el-table-column prop="title" label="打卡内容标题"></el-table-column>
          <el-table-column prop="updateTime" label="发布时间" :formatter="dateFormat"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="checkout(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" :offset="1" style="margin-top: 20px">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="parseInt(pager.size)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(total)"
          @current-change="handleCurrentChange"
          :current-page="parseInt(pager.page)"
          @size-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  import {
    userlist
  } from '@/api/userlist/userlist'

  export default {
    name: "ClockList",
    inject: ['reload'],
    data() {
      return {
        state2: '',
        state1: '',
        state3: '',
        userInfo: [],
        wechat: [],
        total: '',
        pager: {
          page: '',
          size: ''
        },
        phone: [],
        tableData: [],
        value6: '',
        currentPage: 1
      }
    },
    methods: {
      handleSearch(){
        if(this.state1){
          localStorage.clockstate1 = this.state1;
        }
        if(this.state2){
          localStorage.clockstate2 = this.state2;
        }
        if(this.value6){
          localStorage.clockvalue6 = JSON.stringify(this.value6);
        }
        console.log(this.value6);
        this.reload();
      },
      handlereset(){
        localStorage.clockstate1='';
        localStorage.clockstate2='';
        localStorage.clockvalue6='';
        this.reload();
      },
      handleCurrentChange(val) {
        console.log(val);
        localStorage.clockpage = val;
        this.pager.page = val;
        this.getuserinfo();
      },
      handleSizeChange(val) {
        this.pager.size = val;
        localStorage.clocksize = val;
        this.getuserinfo();
      },
      dateFormat: function (row, column, cellValue) {
        var date = cellValue;
        if (date == undefined) {
          return "";
        }
        return this.$moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
      },
      querySearch(queryString, cb) {
        var wechat = this.wechat;
        var results = queryString ? wechat.filter(this.createFilter(queryString)) : wechat;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (wechat) => {
          return (wechat.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      querySearch2(queryString, cb) {
        var phone = this.phone;
        var results = queryString ? phone.filter(this.createFilter(queryString)) : phone;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter2(queryString) {
        return (phone) => {
          return (phone.value);
        };
      },
      getuserinfo() {
        let params = {};
        this.pager.page = localStorage.clockpage ? localStorage.clockpage : 1;
        this.pager.size = localStorage.clocksize ? localStorage.clocksize : 10;
        params.page = this.pager.page;
        params.size = this.pager.size;
       if(localStorage.clockstate2){
         params.phone=localStorage.clockstate2;
       }
       if(localStorage.clockstate1){
         params.wechatNumber=localStorage.clockstate1;
       }
       if(localStorage.clockvalue6){
         let time=JSON.parse(localStorage.clockvalue6);
         params.createAt=time[0];
         params.updateAt=time[1];
       }
        userlist(params).then(this.getUserInfoSucc)
      },
      getUserInfoSucc(res) {
        console.log(res);
        this.tableData = res.data.UserList;
        this.total = res.data.totle;
      },
      checkout(id) {
        this.$router.push({
          name: 'ClockInfo',
          query: {
            index: id
          }
        })
      },
      datetime() {
        console.log(this.value6[0].valueOf());
        console.log(this.value6[1].valueOf());
      }
    },
    mounted() {
      this.getuserinfo();
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .wrapper {
    .w100;
    padding: 10px;
    .column {
      .flexb;
      padding-top: 50px;
      div {
        .flexb;
        align-items: center;
      }
    }
  }
</style>
